<template>
	<view>
		<!-- <view v-if="showHeader" class="status" :style="{position:headerPosition,top:statusTop}"></view> -->
		<view v-if="showHeader" class="header" :style="{position:headerPosition,top:headerTop}">
			<view class="title">{{i18n.shoppingCart}}</view>
			<view class="edit" @tap="editClick">
				{{editStatus?i18n.complete:i18n.edit}}
			</view>
		</view>
		<!-- 占位 -->
		<view v-if="showHeader" class="place"></view>
		<!-- 商品列表 -->
		<view class="goods-list">
			<view class="tis" v-if="shoppingCartItems.length==0">{{i18n.shoppingCartIsEmpty}}~</view>
			<view class="row" v-for="(row,index) in shoppingCartItems" :key="index">
				<!-- 删除按钮 -->
				<view class="menu" @tap.stop="deleteGoods(row.id)">
					<view class="icon shanchu"></view>
				</view>
				<!-- 商品 -->
				<view class="carrier" :class="[theIndex==index?'open':oldIndex==index?'close':'']" @touchstart="touchStart(index,$event)"
				 @touchmove="touchMove(index,$event)" @touchend="touchEnd(index,$event)">
					<!-- checkbox -->
					<view class="checkbox-box" @tap="selected(index)">
						<uni-icons v-if="!row.selected" type="circle" size="20" color="#dc2436"></uni-icons>
						<uni-icons v-if="row.selected" type="checkbox" size="20" color="#dc2436"></uni-icons>
					</view>
					<!-- 商品信息 -->
					<view class="goods-info" @tap="toGoods(row)">
						<view class="img">
							<image :src="row.itemImage"></image>
						</view>
						<view class="info">
							<view class="title">{{row.itemName}}</view>
							<view class="spec" @tap.stop="showConfig">
								<text>{{row.specificationNames}}</text>
							</view>
							<view class="price-number">
								<view class="price">￥{{row.price}}</view>
								<view class="number">
									<view class="sub" @tap.stop="sub(index)">
										<view class="icon jian"></view>
									</view>
									<view class="input" @tap.stop="discard">
										<input type="number" v-model="row.count" @blur="sum($event,index)" />
									</view>
									<view class="add" @tap.stop="add(index)">
										<view class="icon jia"></view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 脚部菜单 -->
		<view class="footer" :style="{bottom:footerbottom}">
			<view class="checkbox-box" @tap="allSelect">
				<!-- 	<view class="checkbox">
					<view :class="[isAllselected?'on':'']"></view>
				</view> -->
				<uni-icons v-if="!isAllselected" type="circle" size="20" color="#dc2436"></uni-icons>
				<uni-icons v-if="isAllselected" type="checkbox" size="20" color="#dc2436"></uni-icons>
				<view class="text">{{i18n.selectAll}}</view>
			</view>
			<view class="settlement">
				<view v-if="!editStatus" class="total">
					<view class="sum">{{i18n.total}}:<view class="money">￥{{totalPrice}}</view>
					</view>
					<view class="rest">
						{{i18n.freight}}{{freight}}元
					</view>
				</view>
				<view v-if="!editStatus" class="btn" @tap="toConfirmation">{{i18n.placeAnOrder}}({{selectedList.length}})</view>
				<view v-if="editStatus" class="btn" @tap="deleteList">{{i18n.deleteSelected}}</view>
			</view>
		</view>
		<!-- 配置弹框 -->
		<uni-popup ref="configPop" type="bottom">
			<view class="configBox">
				<view class="taxContent">
					<uni-icons type="close" size="24" class="popupClose" @click="hideConfig()"></uni-icons>

					<view class="topBox ">
						<view class="imgBox">
							<image src="../../../static/img/goods/p3.jpg" mode="widthFix"></image>
						</view>
						<view class="cont">
							<view class="money">￥{{ goodsList[0].price }}</view>
							<view class="title">{{ goodsList[0].spec }}</view>
						</view>
					</view>
					<view class="innerBox">
						<view class="configBox">
							<view class="title">颜色</view>
							<view class="configList clearfix">
								<view v-for="(item, index) in configList" :key="index" class="listItem" :class="index == modelIndex ? 'active' : ''"
								 @click="modelClick(index, item)">
									<span>{{ item.cont }}</span>
								</view>
							</view>
						</view>
					</view>
					<view class="btnBox flex">确定
					</view>
				</view>
			</view>

		</uni-popup>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	export default {
		computed: {
			i18n() {
				// 倒入你需要的对象
				return this.$t('cart')
			}
		},
		components: {
			uniIcons
		},
		data() {
			return {
				editStatus: false,
				sumPrice: '0.00',
				headerPosition: "fixed",
				headerTop: null,
				statusTop: null,
				showHeader: true,
				selectedList: [],
				isAllselected: false,
				goodsList: [{
						id: 1,
						img: '/static/img/goods/p1.jpg',
						name: '商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',
						spec: '规格:S码',
						price: 127.5,
						number: 1,
						selected: false
					},
					{
						id: 2,
						img: '/static/img/goods/p2.jpg',
						name: '商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',
						spec: '规格:S码',
						price: 127.5,
						number: 1,
						selected: false
					},
					{
						id: 3,
						img: '/static/img/goods/p3.jpg',
						name: '商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',
						spec: '规格:S码',
						price: 127.5,
						number: 1,
						selected: false
					},
					{
						id: 4,
						img: '/static/img/goods/p4.jpg',
						name: '商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',
						spec: '规格:S码',
						price: 127.5,
						number: 1,
						selected: false
					},
					{
						id: 5,
						img: '/static/img/goods/p5.jpg',
						name: '商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',
						spec: '规格:S码',
						price: 127.5,
						number: 1,
						selected: false
					}
				],

				//控制滑动效果
				theIndex: null,
				oldIndex: null,
				isStop: false,
				// 配置选项
				configList: [{
						cont: '默认配置1'
					},
					{
						cont: '默认配置2'
					},
					{
						cont: '默认配置3'
					},
					{
						cont: '默认配置4'
					},
				],
				modelIndex: '',
				token: '',
				microShopId: '',
				sciChooseStrList: [],
				scigChooseStrList: [],
				shoppingCartItems: [],
				shoppingCart: {},
				totalPrice: 0,
				freight: 0,
			}
		},
		onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			this.headerPosition = e.scrollTop >= 0 ? "fixed" : "absolute";
			this.headerTop = e.scrollTop >= 0 ? null : 0;
			this.statusTop = e.scrollTop >= 0 ? null : -this.statusHeight + 'px';
		},
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad() {
			const microShopId = uni.getStorageSync('microShopId');
			if (microShopId) {
				this.microShopId = microShopId;
				console.log(microShopId);
			}


			const token = uni.getStorageSync('token');
			if (token) {
				this.token = token;
				console.log(token);
			}
			//兼容H5下结算条位置
			// #ifdef H5
			this.footerbottom = document.getElementsByTagName('uni-tabbar')[0].offsetHeight + 'px';
			// #endif
			// #ifdef APP-PLUS
			this.showHeader = false;
			this.statusHeight = plus.navigator.getStatusbarHeight();
			// #endif
			this.getCartList(token);
		},
		methods: {
			getCartList(token) {
				uni.request({
					url: 'http://121.40.82.3:52019/v1/template001/shoppingCart/list', //获取购物车列表
					data: {
						// microShopId: "c0a8007c-6e48-18b9-816e-48d048c70043",
						microShopId: this.microShopId
					},
					method: 'GET',
					dataType: 'json',
					header: {
						'token': token,
						'content-type': 'application/json' //自定义请求头信息
					},
					success: (res) => {
						console.log(res.data.data);
						this.sciChooseStrList = res.data.data.sciChooseStrList;
						this.scigChooseStrList = res.data.data.scigChooseStrList;
						this.shoppingCart = res.data.data.shoppingCart;
						this.totalPrice = res.data.data.shoppingCart.totalPrice;
						this.freight = res.data.data.shoppingCart.freight;
						this.shoppingCartItems = res.data.data.shoppingCart.shoppingCartItemGroups[0].shoppingCartItems;
						//遍历选择的ID数组
						for (var i = 0; i < this.sciChooseStrList.length; i++) {
							console.log(this.sciChooseStrList[i])
							//遍历选择的ID数组对应的数据
							for (var j = 0; j < this.shoppingCartItems.length; j++) {
								console.log(this.shoppingCartItems[j].id)
								//比较是否被选中
								if (this.sciChooseStrList[i] == this.shoppingCartItems[j].id) {
									//若选中赋予selected属性									
									this.$set(this.shoppingCartItems[j], "selected", "true");
								}
							}
						}
						//如果都被选中，将全选状态改为true
						if (this.sciChooseStrList.length == this.shoppingCartItems.length) {
							this.isAllselected = true;
						}

					}
				});
			},
			updateCartCount(shoppingCartItemId, count) {
				uni.request({
					url: 'http://121.40.82.3:52019/v1/template001/shoppingCart/updateCount', //修改购物车数量
					data: {
						// microShopId: "c0a8007c-6e48-18b9-816e-48d048c70043",
						microShopId: this.microShopId,
						shoppingCartItemId: shoppingCartItemId,
						count: count
					},
					method: 'POST',
					dataType: 'json',
					header: {
						'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
					},
					success: (res) => {
						console.log(res.data.data);
						this.sciChooseStrList = res.data.data.sciChooseStrList;
						this.scigChooseStrList = res.data.data.scigChooseStrList;
						this.shoppingCart = res.data.data.shoppingCart;
						this.totalPrice = res.data.data.shoppingCart.totalPrice;
						this.freight = res.data.data.shoppingCart.freight;
						this.shoppingCartItems = res.data.data.shoppingCart.shoppingCartItemGroups[0].shoppingCartItems;

					}
				});
			},
			removeCart(shoppingCartItemId) {
				console.log(shoppingCartItemId)
				console.log(this.shoppingCart.id)
				uni.request({
					url: 'http://121.40.82.3:52019/v1/template001/shoppingCartChoose/remove', //取消购物车选择
					data: {
						// microShopId: "c0a8007c-6e48-18b9-816e-48d048c70043",
						microShopId: this.microShopId,
						shoppingCartItemIds: shoppingCartItemId,
						shoppingCartId: this.shoppingCart.id
					},
					method: 'GET',
					dataType: 'json',
					header: {
						'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
					},
					success: (res) => {
						console.log(res);
						this.sciChooseStrList = res.data.data.sciChooseStrList;
						this.scigChooseStrList = res.data.data.scigChooseStrList;
						this.shoppingCart = res.data.data.shoppingCart;
						this.totalPrice = res.data.data.shoppingCart.totalPrice;
						this.freight = res.data.data.shoppingCart.freight;
						this.shoppingCartItems = res.data.data.shoppingCart.shoppingCartItemGroups[0].shoppingCartItems;
						//遍历选择的ID数组
						for (var i = 0; i < this.sciChooseStrList.length; i++) {
							console.log(this.sciChooseStrList[i])
							//遍历选择的ID数组对应的数据
							for (var j = 0; j < this.shoppingCartItems.length; j++) {
								console.log(this.shoppingCartItems[j].id)
								//比较是否被选中
								if (this.sciChooseStrList[i] == this.shoppingCartItems[j].id) {
									//若选中赋予selected属性									
									this.$set(this.shoppingCartItems[j], "selected", "true");
								}
							}
						}
					}
				});
			},
			chooseCart(shoppingCartItemId) {
				console.log(shoppingCartItemId)
				console.log(this.shoppingCart.id)
				uni.request({
					url: 'http://121.40.82.3:52019/v1/template001/shoppingCartChoose/choose', //购物车选择
					data: {
						// microShopId: "c0a8007c-6e48-18b9-816e-48d048c70043",
						microShopId: this.microShopId,
						shoppingCartItemIds: shoppingCartItemId,
						shoppingCartId: this.shoppingCart.id,
						shoppingCartItemGroupId: this.shoppingCart.shoppingCartItemGroups[0].id,

					},
					method: 'GET',
					dataType: 'json',
					header: {
						'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
					},
					success: (res) => {
						console.log(res);
						this.sciChooseStrList = res.data.data.sciChooseStrList;
						this.scigChooseStrList = res.data.data.scigChooseStrList;
						this.shoppingCart = res.data.data.shoppingCart;
						this.totalPrice = res.data.data.shoppingCart.totalPrice;
						this.freight = res.data.data.shoppingCart.freight;
						this.shoppingCartItems = res.data.data.shoppingCart.shoppingCartItemGroups[0].shoppingCartItems;
						//遍历选择的ID数组
						for (var i = 0; i < this.sciChooseStrList.length; i++) {
							console.log(this.sciChooseStrList[i])
							//遍历选择的ID数组对应的数据
							for (var j = 0; j < this.shoppingCartItems.length; j++) {
								console.log(this.shoppingCartItems[j].id)
								//比较是否被选中
								if (this.sciChooseStrList[i] == this.shoppingCartItems[j].id) {
									//若选中赋予selected属性									
									this.$set(this.shoppingCartItems[j], "selected", "true");
								}
							}
						}
					}
				});
			},
			chooseAll() {
				uni.request({
					url: 'http://121.40.82.3:52019/v1/template001/shoppingCartChoose/chooseAll', //购物车全选
					data: {
						// microShopId: "c0a8007c-6e48-18b9-816e-48d048c70043",
						microShopId: this.microShopId,
						shoppingCartId: this.shoppingCart.id,
					},
					method: 'GET',
					dataType: 'json',
					header: {
						'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
					},
					success: (res) => {
						console.log(res);
						this.sciChooseStrList = res.data.data.sciChooseStrList;
						this.scigChooseStrList = res.data.data.scigChooseStrList;
						this.shoppingCart = res.data.data.shoppingCart;
						this.totalPrice = res.data.data.shoppingCart.totalPrice;
						this.freight = res.data.data.shoppingCart.freight;
						this.shoppingCartItems = res.data.data.shoppingCart.shoppingCartItemGroups[0].shoppingCartItems;
						//遍历选择的ID数组
						for (var i = 0; i < this.sciChooseStrList.length; i++) {
							console.log(this.sciChooseStrList[i])
							//遍历选择的ID数组对应的数据
							for (var j = 0; j < this.shoppingCartItems.length; j++) {
								console.log(this.shoppingCartItems[j].id)
								//比较是否被选中
								if (this.sciChooseStrList[i] == this.shoppingCartItems[j].id) {
									//若选中赋予selected属性									
									this.$set(this.shoppingCartItems[j], "selected", "true");
								}
							}
						}
					}
				});
			},
			removeAll() {
				uni.request({
					url: 'http://121.40.82.3:52019/v1/template001/shoppingCartChoose/removeAll', //购物车全取消
					data: {
						// microShopId: "c0a8007c-6e48-18b9-816e-48d048c70043",
						microShopId: this.microShopId,
						shoppingCartId: this.shoppingCart.id,
					},
					method: 'GET',
					dataType: 'json',
					header: {
						'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
					},
					success: (res) => {
						console.log(res);
						this.sciChooseStrList = res.data.data.sciChooseStrList;
						this.scigChooseStrList = res.data.data.scigChooseStrList;
						this.shoppingCart = res.data.data.shoppingCart;
						this.totalPrice = res.data.data.shoppingCart.totalPrice;
						this.freight = res.data.data.shoppingCart.freight;
						this.shoppingCartItems = res.data.data.shoppingCart.shoppingCartItemGroups[0].shoppingCartItems;

					}
				});
			},


			//加入商品 参数 goods:商品数据
			joinGoods(goods) {
				/*
				 * 这里只是展示一种添加逻辑，模板并没有做从其他页面加入商品到购物车的具体动作，
				 * 在实际应用上，前端并不会直接插入记录到goodsList这一个动作，一般是更新列表和本地列表缓存。
				 * 一般商城购物车的增删改动作是由后端来完成的,
				 * 后端记录后返回前端更新前端缓存
				 */
				let len = this.goodsList.length;
				let isFind = false; //是否找到ID一样的商品
				for (let i = 0; i < len; i++) {
					let row = this.goodsList[i];
					if (row.id == goods.id) { //找到商品一样的商品
						this.goodsList[i].number++; //数量自增
						isFind = true; //找到一样的商品
						break; //跳出循环
					}
				}
				if (!isFind) {
					//没有找到一样的商品，新增一行到购物车商品列表头部
					this.goodsList[i].unshift(goods);
				}
			},
			//控制左滑删除效果-begin
			touchStart(index, event) {
				//多点触控不触发
				if (event.touches.length > 1) {
					this.isStop = true;
					return;
				}
				this.oldIndex = this.theIndex;
				this.theIndex = null;
				//初始坐标
				this.initXY = [event.touches[0].pageX, event.touches[0].pageY];
			},
			touchMove(index, event) {
				//多点触控不触发
				if (event.touches.length > 1) {
					this.isStop = true;
					return;
				}
				let moveX = event.touches[0].pageX - this.initXY[0];
				let moveY = event.touches[0].pageY - this.initXY[1];

				if (this.isStop || Math.abs(moveX) < 5) {
					return;
				}
				if (Math.abs(moveY) > Math.abs(moveX)) {
					// 竖向滑动-不触发左滑效果
					this.isStop = true;
					return;
				}

				if (moveX < 0) {
					this.theIndex = index;
					this.isStop = true;
				} else if (moveX > 0) {
					if (this.theIndex != null && this.oldIndex == this.theIndex) {
						this.oldIndex = index;
						this.theIndex = null;
						this.isStop = true;
						setTimeout(() => {
							this.oldIndex = null;
						}, 150)
					}
				}
			},
			touchEnd(index, $event) {
				//结束禁止触发效果
				this.isStop = false;
			},
			//控制左滑删除效果-end


			//商品跳转
			toGoods(e) {
				uni.showToast({
					title: '商品' + e.id,
					icon: "none"
				});
				uni.navigateTo({
					url: '../../goods/goods'
				});
			},
			//跳转确认订单页面
			toConfirmation() {
				let tmpList = [];
				let len = this.shoppingCartItems.length;
				for (let i = 0; i < len; i++) {
					if (this.shoppingCartItems[i].selected) {
						tmpList.push(this.shoppingCartItems[i]);
					}
				}
				if (tmpList.length < 1) {
					uni.showToast({
						title: '请选择商品结算',
						icon: 'none'
					});
					return;
				}
				console.log(tmpList)
				uni.setStorage({
					key: 'buylist',
					data: tmpList,
					success: () => {
						uni.navigateTo({
							url: '../../order/confirmation'
						})
					}
				})
			},
			//删除商品
			deleteGoods(id) {
				console.log(id)
				// let len = this.goodsList.length;
				// for(let i=0;i<len;i++){
				// 	if(id==this.goodsList[i].id){
				// 		this.goodsList.splice(i, 1);
				// 		break;
				// 	} 
				// }
				// this.selectedList.splice(this.selectedList.indexOf(id), 1);
				this.sum();
				this.oldIndex = null;
				this.theIndex = null;
			},
			// 删除商品s
			deleteList() {
				let len = this.selectedList.length;
				console.log(this.selectedList)

				this.removeCart(this.selectedList)
				// while (this.selectedList.length > 0) {
				// 	this.deleteGoods(this.selectedList[0]);
				// }
				// this.selectedList = [];
				// this.isAllselected = this.selectedList.length == this.goodsList.length && this.goodsList.length > 0;
				// this.sum();
			},
			// 选中商品
			selected(index) {
				console.log(this.shoppingCartItems[index].selected)
				if (this.shoppingCartItems[index].selected) {
					this.removeCart(this.shoppingCartItems[index].id);
				} else {
					this.chooseCart(this.shoppingCartItems[index].id);
				}
				this.shoppingCartItems[index].selected = this.shoppingCartItems[index].selected ? false : true;
				console.log(this.shoppingCartItems)
				let i = this.selectedList.indexOf(this.shoppingCartItems[index].id);
				i > -1 ? this.selectedList.splice(i, 1) : this.selectedList.push(this.shoppingCartItems[index].id);
				this.isAllselected = this.selectedList.length == this.shoppingCartItems.length;
				this.sum();

			},
			//全选
			allSelect() {
				console.log(this.isAllselected)
				if (this.isAllselected) {
					this.removeAll();
				} else {
					this.chooseAll();
				}

				let len = this.shoppingCartItems.length;
				let arr = [];
				for (let i = 0; i < len; i++) {
					this.shoppingCartItems[i].selected = this.isAllselected ? false : true;
					arr.push(this.shoppingCartItems[i].id);
				}
				this.selectedList = this.isAllselected ? [] : arr;
				this.isAllselected = this.isAllselected || this.shoppingCartItems.length == 0 ? false : true;
				this.sum();
			},
			// 减少数量
			sub(index) {
				if (this.shoppingCartItems[index].count <= 1) {
					return;
				}
				this.shoppingCartItems[index].count--;
				console.log(this.shoppingCartItems[index].id)
				console.log(this.shoppingCartItems[index].count)
				this.updateCartCount(this.shoppingCartItems[index].id, this.shoppingCartItems[index].count)

				this.sum();

			},
			// 增加数量
			add(index) {
				this.shoppingCartItems[index].count++;
				console.log(this.shoppingCartItems[index].id)
				console.log(this.shoppingCartItems[index].count)
				this.updateCartCount(this.shoppingCartItems[index].id, this.shoppingCartItems[index].count)
				this.sum();
			},
			// 合计
			sum(e, index) {
				this.totalPrice = 0;
				let len = this.shoppingCartItems.length;
				for (let i = 0; i < len; i++) {
					if (this.shoppingCartItems[i].selected) {
						if (e && i == index) {
							this.totalPrice = this.totalPrice + (e.detail.value * this.shoppingCartItems[i].price);
						} else {
							this.totalPrice = this.totalPrice + (this.shoppingCartItems[i].count * this.shoppingCartItems[i].price);
						}
					}
				}
				this.totalPrice = this.totalPrice.toFixed(2);
			},
			discard() {
				//丢弃
			},
			editClick() {
				this.editStatus = !this.editStatus
			},
			showConfig() {
				this.$refs.configPop.open()
			},
			hideConfig() {
				this.$refs.configPop.close()
			},
			modelClick(index, data) {
				this.modelIndex = index;
				// this.config.model = data;
			},


		}
	}
</script>
<style lang="scss">
	page {
		position: relative;
		background-color: #fff;
	}

	.checkbox-box {
		display: flex;
		align-items: center;

		.checkbox {
			width: 35upx;
			height: 35upx;
			border-radius: 50%;
			border: solid 2upx #f06c7a;
			display: flex;
			justify-content: center;
			align-items: center;

			.on {
				width: 25upx;
				height: 25upx;
				border-radius: 50%;
				background-color: #f06c7a;
			}
		}

		.text {
			font-size: 28upx;
			margin-left: 10upx;
		}
	}

	.status {
		width: 100%;
		height: 0;
		position: fixed;
		z-index: 10;
		background-color: #fff;
		top: 0;
		/*  #ifdef  APP-PLUS  */
		height: var(--status-bar-height); //覆盖样式
		/*  #endif  */
	}

	.header {
		width: 92%;
		padding: 0 4%;
		height: 80upx;
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		z-index: 10;
		background-color: #f4f4f4;
		color: #91683e;
		/*  #ifdef  APP-PLUS  */
		top: var(--status-bar-height);

		/*  #endif  */
		.title {
			font-size: 36upx;
			font-family: NSimSun;
		}

		.edit {
			margin-left: auto;
			padding: 2upx 20upx;
			font-size: 24upx;
			border: 1upx solid #91683e;
		}

	}

	.place {

		background-color: #ffffff;
		height: 80upx;
		/*  #ifdef  APP-PLUS  */
		margin-top: var(--status-bar-height);
		/*  #endif  */
	}

	.goods-list {
		width: 100%;
		padding: 20upx 0 120upx 0;

		.tis {
			width: 100%;
			height: 60upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32upx;
		}

		.row {
			width: calc(92%);
			height: calc(22vw + 40upx);
			margin: 20upx auto;

			border-radius: 15upx;
			box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);
			display: flex;
			align-items: center;
			position: relative;
			overflow: hidden;
			z-index: 4;
			border: 0;

			.menu {
				.icon {
					color: #fff;
					// font-size: 25upx;
				}

				position: absolute;
				width: 30%;
				height: 100%;
				right: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: red;
				color: #fff;
				z-index: 2;
			}

			.carrier {
				@keyframes showMenu {
					0% {
						transform: translateX(0);
					}

					100% {
						transform: translateX(-30%);
					}
				}

				@keyframes closeMenu {
					0% {
						transform: translateX(-30%);
					}

					100% {
						transform: translateX(0);
					}
				}

				&.open {
					animation: showMenu 0.25s linear both;
				}

				&.close {
					animation: closeMenu 0.15s linear both;
				}

				background-color: #fff;

				.checkbox-box {
					padding-left: 20upx;
					flex-shrink: 0;
					height: 22vw;
					margin-right: 20upx;
				}

				position: absolute;
				width: 100%;
				padding: 0 0;
				height: 100%;
				z-index: 3;
				display: flex;
				align-items: center;

				.goods-info {
					width: 100%;
					display: flex;
					padding-right: 20upx;

					.img {
						width: 22vw;
						height: 22vw;
						border-radius: 10upx;
						overflow: hidden;
						flex-shrink: 0;
						margin-right: 10upx;

						image {
							width: 22vw;
							height: 22vw;
						}
					}

					.info {
						width: 100%;
						height: 22vw;
						overflow: hidden;
						display: flex;
						flex-wrap: wrap;
						position: relative;

						.title {
							width: 100%;
							font-size: 28upx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							// text-align: justify;
							overflow: hidden;
						}

						.spec {
							font-size: 20upx;
							background-color: #f3f3f3;
							color: #a7a7a7;
							height: 40upx;
							display: flex;
							align-items: center;
							padding: 0 16upx;
							max-width: 400upx;
							border-radius: 15upx;
							margin-bottom: 20vw;
							overflow: hidden;

							text {
								text-overflow: ellipsis;
								overflow: hidden;
								white-space: nowrap;
							}
						}

						.price-number {
							position: absolute;
							width: 100%;
							bottom: 0upx;
							display: flex;
							justify-content: space-between;
							align-items: flex-end;
							font-size: 28upx;
							height: 60upx;

							.price {
								color: #ff0000;
							}

							.number {
								display: flex;
								justify-content: center;
								align-items: flex-end;

								.input {
									width: 60upx;
									height: 44upx;
									margin: 0 10upx;
									background-color: #f3f3f3;

									input {
										width: 60upx;
										height: 44upx;
										display: flex;
										justify-content: center;
										align-items: center;
										text-align: center;
										font-size: 26upx;
									}
								}

								.sub,
								.add {
									width: 45upx;
									height: 45upx;
									background-color: #f3f3f3;
									border-radius: 5upx;

									.icon {
										font-size: 22upx;
										width: 45upx;
										height: 45upx;
										display: flex;
										justify-content: center;
										align-items: center;

									}
								}
							}
						}
					}
				}
			}
		}
	}

	.footer {
		width: 92%;
		padding: 0 4%;
		background-color: #fbfbfb;
		height: 100upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28upx;
		position: fixed;
		bottom: 0upx;
		z-index: 5;

		.delBtn {
			border: solid 1upx #f06c7a;
			color: #f06c7a;
			padding: 0 30upx;
			height: 50upx;
			border-radius: 30upx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.settlement {
			width: 60%;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.total {

				.sum {
					// width: 50%;
					font-size: 28upx;
					margin-right: 10upx;
					display: flex;
					justify-content: flex-end;

					.money {
						font-weight: 600;
					}
				}

				.rest {
					color: #666;
				}
			}

			.btn {
				width: 200upx;
				height: 80upx;
				background-color: #dc2935;
				border-radius: 50upx;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}

	.configBox {
		.taxContent {
			padding: 0 20rpx;
			height: 1000rpx;
			background-color: #fff;

			.popupClose {
				position: absolute;
				right: 20rpx;
				top: 20rpx;
			}

			.topBox {
				display: flex;
				align-items: center;
				padding: 20rpx 0;

				.imgBox {
					border-radius: 20rpx;
					border: 2rpx solid #eee;
					width: 180rpx;
					overflow: hidden;

					image {
						width: 100%;
						display: block;
					}
				}

				.cont {
					padding-left: 20rpx;
					box-sizing: border-box;

					.money {
						color: #ff4422;
						margin: 10rpx 0;
					}

					.title {
						font-size: 24rpx;
						color: #666;
						height: 115rpx;
						overflow: hidden;
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;
						display: -webkit-box;
						text-overflow: ellipsis;
					}
				}
			}

			.clearfix::after {
				content: "";
				display: block;
				clear: both;
				visibility: hidden;
				line-height: 0;
				height: 0;
				font-size: 0;
			}

			.innerBox {
				overflow: scroll;
				height: 500rpx;

				// &::-webkit-scrollbar {
				// 	display: none;
				// }
				.configBox {
					height: 100%;

					.title {
						font-size: 30rpx;
						padding: 10rpx 0;
					}

					.configList {
						height: 100%;

						.listItem {
							font-size: 28rpx;
							border: 2rpx solid #f5f5f5;
							background: #f6f6f6;
							height: auto;
							line-height: 1.5;
							padding: 2rpx 4rpx;
							float: left;
							display: flex;
							align-items: center;
							margin: 10rpx;
							border-radius: 20rpx;
							padding: 5rpx 20rpx;
							box-sizing: border-box;
							overflow: hidden;

							&:active {
								border: 2rpx solid #fc0;
								background: #ffeda2;
							}

							&.active {
								border: 2rpx solid #fc0;
								background: #ffeda2;
							}

						}
					}
				}

			}

			.btnBox {
				border-radius: 20rpx;
				overflow: hidden;
				position: fixed;
				bottom: 20rpx;
				left: 20rpx;
				right: 20rpx;
				background-color: #ee1834;
				width: 50%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 30rpx;
				color: #fff;
				text-align: center;
				width: 90%;
				margin: 0 auto;
			}
		}
	}

	.uni-popup {
		z-index: 999;
	}
</style>
